<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="./jquery.min.3.4.1.js"></script>

    <script>
        $(function () {

            // 验证 jQuery是否引入成功
            // if (jQuery) {
            //     alert('引入成功')
            // } else {
            //     alert('引入失败')
            // }

            /*
           *   第一个按钮点击:
           *   选择所有id为box的标签,设置css样式
           **/
            $('button:eq(0)').click(function () {
                $('#box').css({
                    backgroundColor: 'red'
                })
            });

            /**
             * 第二个按钮点击:
             * 选择所有class为.left的标签,设置css样式
             */
            $('button:eq(1)').click(function () {
                $('.left').css('background', 'red');
            })

            /**
            * 第三个按钮点击:
            * 选择所有p标签,设置css样式
            */
            $('button:eq(2)').click(function () {
                $('p').css('background', 'red');
            });


            /**
             * 第三个按钮点击:
             * 选择所有p和h1标签,设置css样式
             */
            $('button:eq(3)').click(function () {
                // 在 jQuery 中并集选择器 以逗号分隔
                $('p,h1').css('background', 'red');
            });






        });



    </script>
</head>

<body>
    <button>$('#box')id选择器</button>
    <button>$('.left').class选择器</button>
    <button>$('p')标签选择器</button>
    <button>$('p,h1')并集选择器</button>

    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>

    <div class="left">我是.left</div>
    <div id="box">我是id的dvi</div>

    <h1>标题1标签</h1>
    <h2>标题2标签</h2>
    <h3>标题3标签</h3>

    <ul class="ulItem">
        <li>列表项</li>
        <li>列表项
            <ul>
                <li>列表项</li>
                <li>列表项</li>
                <li>列表项</li>
            </ul>
        </li>
        <li>列表项</li>
    </ul>
</body>

</html>